<template>
  <div class="citySiteBox">
    <!-- 头部 -->
    <div class="citySite-head">
      <div class="quitBox" @click="quitBox()">
        <i class="iconfont">&#xe611;</i>
      </div>
      <div class="cityBox">当前城市-</div>
    </div>
    <!-- 搜索 -->
    <div class="headXiaBox">
      <div class="searchBox">
        <i class="iconfont subBox">&#xe69d;</i>
        <input type="text" placeholder="输入城市名或拼音" class="searchInput" name="cityName">
        <span class="cancelBox">取消</span>
      </div>
    </div>
    <!-- recommend-city热门城市 -->
    <div class="recommend-city">
      <div class="hotCity">
        <p>GPS 所定位你所在的城市</p>
        <div class="dingWeiBox">
          <i class="iconfont">&#xe651;</i>
          {{this.$store.state.curCity}}
        </div>
        <p>热门城市</p>
        <div class="cityList">
          <ul>
            <li v-for="(item,index) in cityHot" :key="index" @click="liCity(item)">{{ item }}</li>
          </ul>
        </div>
      </div>
      <!-- 第一次外面循环大数组，里面二次循环他的每一个值里的list -->
      <div class="city1" v-for="(item,index) in traversalRes" :key="index">
        <p>{{ item.py }}</p>
        <ul>
          <li
            v-for="(item1,index1) in item.list"
            :key="index1"
            @click="liCity(item1.name)"
          >{{ item1.name }}</li>
        </ul>
      </div>

      <!-- 侧边固定导航 -->
      <div class="ZmDaoHang">
        <ul>
          <li v-for="(item,index) in traversalRes" :key="index" @click="clickPy(item)">{{ item.py }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "mint-ui";
// import { mapState } from "vuex";
export default {
  name: "citySite",
  data() {
    return {
      cityClassify: [], //拉取下来的数据没遍历
      traversalRes: [], //遍历后字母的数据
      cityHot: [], //热门城市
      clickCity: "", //点击城市
      pyshow: []
    };
  },
  temputed: {
    // ...mapState([])
  },
  methods: {
    // 定位页面退出
    quitBox() {
      this.$router.push("/home/NowPlay");
    },
    // 点击当前城市保存到仓库，并修改
    liCity(idCity) {
      //提交到xiuCity这方法，传参idCity
      this.$store.commit("xiuCity", idCity);
      this.$router.go(-1); //谁进来点击了城市，就会返回原来的页面
    },
    // 字母排序
    compare(obj1, obj2) {
      var val1 = obj1.py;
      var val2 = obj2.py;
      if (val1 < val2) {
        return -1;
      } else if (val1 > val2) {
        return 1;
      } else {
        return 0;
      }
    },
    clickPy(itemPy) {
      if (itemPy) {
      }
    }
  },
  // 创建之后
  created() {
    axios.get("/api/films/citySite").then(res => {
      Toast("请求成功");
      var result = res.data;
      // console.log(result);
      this.cityClassify = result.data;
      if (result.code === 0) {
        var hash = {}; //记录某个拼音字母是否存在
        var i = 0;
        var resRrray = []; //遍历后拿到的结果
        this.traversalRes = resRrray;
        this.cityClassify.forEach(item => {
          // 截取字符串从下标0开始截取一个字符，小写转大写
          var py = item.pinyin.substring(0, 1).toUpperCase();
          if (hash[py]) {
            resRrray[hash[py] - 1].list.push(item);
          } else {
            hash[py] = ++i;
            resRrray.push({
              py: py,
              list: [item]
            });
          }
          //热门城市
          var HotData = item.isHot;
          if (HotData === 1) {
            this.cityHot.push(item.name);
          }
        });
        // 字母排序
        this.traversalRes = this.traversalRes.sort(this.compare);
      } else {
        Toast(result.msg);
      }
    });
  }
};
</script>

<style lang="scss">
@import "@/style/common/px2rem.scss";

.citySiteBox {
  width: 100%;
  display: flex;
  flex-direction: column;

  // 头部
  .citySite-head {
    position: fixed;
    // z-index: 1;
    background: #fff;
    display: flex;
    width: 100%;
    height: px2rem(44);
    // background: pink;

    // 退出
    .quitBox {
      display: flex;
      width: 15%;
      justify-content: center;
      align-items: center;

      .iconfont {
        font-size: px2rem(18);
      }
    }

    .cityBox {
      display: flex;
      width: 70%;
      height: 100%;
      justify-content: center;
      align-items: center;
      font-size: px2rem(18);
      font-weight: 200;
    }
  }

  .headXiaBox {
    // display: flex;
    // flex: 1;
    position: fixed;
    margin-top: px2rem(44);
    width: 100%;
    height: px2rem(50);
    background: #eee;
    padding: px2rem(10) px2rem(0) px2rem(10) px2rem(20);
    box-sizing: border-box;

    .searchBox {
      display: flex;
      width: 100%;
      height: px2rem(30);
      background: #eee;

      .subBox {
        text-align: center;
        width: px2rem(30);
        height: 100%;
        background: #fff;
        display: block;
        font-size: px2rem(16);
        line-height: px2rem(30);
      }

      .searchInput {
        width: 75%;
        height: px2rem(30);
        border: 0;
        font-size: px2rem(12);
        outline: none;
      }

      span {
        font-size: px2rem(16);
        display: inline-block;
        width: px2rem(60);
        text-align: center;
        line-height: px2rem(30);
        display: none;
      }
    }
  }

  .recommend-city {
    margin-top: px2rem(94);
    width: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;

    .hotCity {
      height: px2rem(212);
      padding: px2rem(13) px2rem(0) px2rem(13) px2rem(15);
      box-sizing: border-box;

      p {
        font-size: px2rem(12);
        color: rgb(121, 125, 130);
      }

      .dingWeiBox {
        width: px2rem(100);
        height: px2rem(30);
        background: rgb(244, 244, 244);
        color: block;
        font-size: px2rem(14);
        border-radius: px2rem(5);
        margin-top: px2rem(15);
        margin-bottom: px2rem(15);
        text-align: center;
        line-height: px2rem(30);
        box-sizing: border-box;
        .iconfont {
          font-size: px2rem(20);
        }
      }

      .cityList {
        width: 100%;
        // height: 100%;
        display: flex;
        flex: 1;
        padding-top: px2rem(15);
        box-sizing: border-box;

        ul {
          // display: flex;
          // justify-content: space-around;
          // flex-wrap: wrap;

          li {
            float: left;
            width: px2rem(100);
            height: px2rem(31);
            background: rgb(244, 244, 244);
            font-size: px2rem(14);
            border-radius: px2rem(5);
            text-align: center;
            line-height: px2rem(30);
            margin-bottom: px2rem(15);
            margin-right: px2rem(20);
          }
        }
      }
    }

    // 城市列表
    .city1 {
      width: 100%;
      display: flex;
      flex-direction: column;

      p {
        width: 100%;
        height: px2rem(30);
        padding-left: px2rem(15);
        background: rgb(244, 244, 244);
        font-size: px2rem(12);
        line-height: px2rem(30);
        color: rgb(128, 132, 137);
        box-sizing: border-box;
      }

      ul {
        // display: flex;
        flex-direction: column;
        width: 100%;
        padding-left: px2rem(15);
        padding-right: px2rem(15);
        box-sizing: border-box;
        // padding-top: px2rem(10);
        padding-bottom: px2rem(10);

        li {
          display: flex;
          float: left;
          flex-direction: row;
          margin-left: px2rem(10);
          justify-content: center;
          align-items: center;
          width: px2rem(100);
          height: px2rem(46);
          font-size: px2rem(14);
          border-radius: px2rem(5);
          background: #eee;
          margin-top: px2rem(10);
        }
      }
    }

    .ZmDaoHang {
      width: px2rem(15);
      position: fixed;
      right: 0;
      top: 8%;
      font-size: px2rem(12);
      text-align: center;
      box-sizing: border-box;
      margin-top: px2rem(94);
      margin-bottom: px2rem(100);
      // display: none;

      li {
        display: block;
        margin-top: px2rem(10);
      }
    }
  }
}
</style>
